(function($){
	$.fn.slideBox = function(settings) {
		var config = {
		'maskHeight'   : undefined,
		'maskWidth'    : undefined,
		'maskZindex'   : undefined,
		'maskPosition' : 'relative',
		'overlay'      : true,
		'overlayId'    : 'overlay',
		'overlayType'  : 'wholeBox',
		'overlayFire'  : 'mouseenter',
		'overlayLeave' : 'mouseleave',
		'animSpeed'    : 2000,
		'easing'       : 'swing',
		'topTitle'     : 'At the First Item',
		'bottomTitle'  : 'At the Last Item',
		'delay'        : 1,
		'menuSpeed'    : 300
	};
	
	var settings = $.extend(config, settings);
	settings.defEasing = 'swing';
	$(this).data('animate', {state: true});
	if( $.easing.def) {
		$(this).data('easing', {plugin: true});
	}else {
		$(this).data('easing', {plugin: false});
		if(settings.easing != 'swing' && settings.easing != 'linear') {
			settings.easing = settings.defEasing;
		}
	}

	var t = '';
	this.each(function(i) {
		var inst = $(this).attr('id');
		// set up mask styles
		$(this).css({
			'overflow':'hidden',
			'height'  : mh = (settings.maskHeight == undefined)   ? mh = $(this).height()        : mh = settings.maskHeight,
			'width'   : mw = (settings.maskWidth == undefined)    ? mw = $(this).width()         : mw = settings.maskWidth,
			'z-index' : mz = (settings.maskZindex == undefined)   ? mz = $(this).css('z-index')  : mz = settings.maskZindex,
			'position': mp = (settings.maskPosition == undefined) ? mp = $(this).css('position') : mp = settings.maskPosition
		});
		
		// create the slider
		var slider = 'slider'+i;
		$(this).wrapInner('<div id="'+slider+'"></div>');
		$('#'+slider).css({
			'position':'absolute',
			'top'	  : '0',
			'left'	  : '0',
			'z-index' : '10'
		});
		
		//set up overlay
		if(settings.overlay) {
			var overLay = settings.overlayId + i;
			$('<div id="'+overLay+'" class="overlay-div"><a href="#" title="Previous" class="nav prev">Previous</a><a class="nav next" title="Next" href="#">Next</a></div>').prependTo(this);
			$('#'+overLay).css({
				'height'             : 0, 
				'z-index'            : 10001,
				'width'              : '100%', 
				'position'           : 'absolute',
				'top'                : 0,
				'background-color'   : '#fff',
				'background-image'   : 'url(images/hover-bg.gif)',
				'background-repeat'  : 'repeat-x',
				'display'            : 'none',
				'border-bottom'      : '1px solid #aeaeae'
			});
			if(settings.overlayType == 'strip') {
				$('<div id="hover-line'+i+'" style="height:5px; width:100%; background-color:#000; z-index:10000; position:absolute; top:0; "></div>').prependTo(this);
				var hoverDiv = $('#hover-line'+i);
				hoverDiv.bind(settings.overlayFire,function(){
					$('#'+overLay).animate({height: '30px', opacity: 'show'}, settings.menuSpeed, function() {
						$(this).bind(settings.overlayLeave,function(){
						$('#'+overLay).animate({height: '0', opacity: 'hide'}, settings.menuSpeed);
					});
				});
			});
			}else {
			var hoverDiv = $(this);
				hoverDiv.hover(
					function(){
						if(t) {
							clearTimeout(t);
						}
			
						$('#'+overLay).animate({height: '30px', opacity: 'show'}, settings.menuSpeed);
					},
					function() {
						if(settings.delay > 0) {
							var timerCallback = function() {
							$('#'+overLay).animate({height: '0', opacity: 'hide'}, settings.menuSpeed);
						};
						var time = (settings.delay * 1000);
						t = setTimeout(timerCallback, time);
			
						}else {
							$('#'+overLay).animate({height: '0', opacity: 'hide'}, settings.menuSpeed);
						}
					}
				);
			
			}
			$('#'+overLay+' a.prev').addClass('atTop').attr('title', settings.topTitle);
		}
		
		// set up click handling and animations
		$('#'+overLay+' a.nav').click(function(e){
			e.preventDefault();
			if($('#'+inst).data('animate').state) {
				var currentTitle = $(this).attr('title');
				if( $(this).hasClass('prev') ) {
					var offset = $('#'+slider).position();
					if($(this).hasClass('atTop')) {
						//do nothing, already at the top
					}else {
						$('#'+inst).data('animate', {state: false});
						$('#'+overLay+' a.next').removeClass('atBottom');
						$(this).toggleClass('loading').attr('title', 'loading...');
						$(this).data('clicked', {name: $(this).attr('class')});
						var h = (offset.top + $('#'+inst).height());
						$('#'+slider).animate(
							{top: h+'px'}, 
							settings.animSpeed,
							settings.easing,
							function(){
								var o = $('#'+slider).position();
								if(o.top == 0) {
									$('#'+overLay+' a.prev').addClass('atTop').attr('title', settings.topTitle);
								}else {
									$('#'+overLay+' a.next').attr('title', 'Next');
									$('#'+overLay+' a.prev').toggleClass('loading').attr('title', currentTitle);
								}
								$('#'+inst).data('animate', {state: true});
		
							}
						);
		
					}
		
				}
		
				if( $(this).hasClass('next') ) {
		
					var offset = $('#'+slider).position();
		
					if($(this).hasClass('atBottom')) {
						//do nothing, already at the bottom
					}else {
						$('#'+inst).data('animate', {state: false});
						$('#'+overLay+' a.prev').removeClass('atTop');
						$(this).toggleClass('loading').attr('title', 'loading...');
						var h = (offset.top - $('#'+inst).height());
						$('#'+slider).animate(
							{top: h+'px'}, 
							settings.animSpeed,
							settings.easing,
							function(){
								var o  = $('#'+slider).position(),
								hi = $('#'+slider).height();
		
								if(( hi + o.top ) == $('.box').height() ) {
									$('#'+overLay+' a.next').addClass('atBottom').attr('title', settings.bottomTitle);
								}else {
									$('#'+overLay+' a.prev').attr('title', 'Previous');
									$('#'+overLay+' a.next').toggleClass('loading').attr('title', currentTitle);
								}
								$('#'+inst).data('animate', {state: true});
		
							}
						);
					}
				}
			}
		});
	
	});
	
	return this;
	
	};
})(jQuery);